<template>
  <div>
    <Bluetable ref="blueTable" :t-head="tHead" :t-data="tableData" :child-open="childOpen" @childOpenData="setTrue" />
    <pagination :total="query.total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getList" />
    <el-dialog width="90%" title="电子病历-姓名" :visible.sync="childOpen">
      <div class="wrapper">
        <div class="content-top">
          <div class="btns">
            <el-button size="mini" type="primary">保存</el-button>
            <el-button size="mini" type="success">导出</el-button>
            <el-button size="mini" type="info" @click="childOpenInfo = true">病人信息</el-button>
            <el-button size="mini" type="danger">EMR</el-button>
          </div>
          <div class="query">
            <div class="check">
              <div class="c_right">
                <div class="clear">
                  <div class="fl">
                    <span class="c_tip">药历号</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">民族</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">病床床号</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">药师</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">联系电话</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">住院号</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">出生日期</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">入院日期</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">主管医生</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">体重指数</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">体表面积</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">姓名</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">年龄</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">性别</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">出院日期</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">工作单位</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">血型</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">血压</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">籍贯</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">身高(cm)</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">体重(kg)</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">科室</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip">联系地址</span>
                    <input type="text" class="c_input">
                  </div>
                  <div class="fl">
                    <span class="c_tip c_tip_long">不良嗜好(烟、酒、药物依赖)</span>
                    <input type="text" class="c_input">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-bottom">
          <el-tabs v-model="activeName">
            <el-tab-pane label="病历及用药史" name="first">
              <div class="cards">
                <div class="card-item"><card>
                  <div slot="cardHeader">主诉</div>
                  <div slot="cardBody" class="cardBody"><el-input v-model="test" type="textarea" /></div>
                </card></div>
                <div class="card-item"><card>
                  <div slot="cardHeader">现病史</div>
                  <div slot="cardBody"><el-input v-model="test" type="textarea" /></div>
                </card></div>
                <div class="card-item"><card>
                  <div slot="cardHeader">既往病史</div>
                  <div slot="cardBody"><el-input v-model="test" type="textarea" /></div>
                </card></div>
                <div class="card-item"><card>
                  <div slot="cardHeader">家族史</div>
                  <div slot="cardBody"><el-input v-model="test" type="textarea" /></div>
                </card></div>
                <div class="card-item"><card>
                  <div slot="cardHeader">过敏史</div>
                  <div slot="cardBody"><el-input v-model="test" type="textarea" /></div>
                </card></div>
                <div class="card-item"><card>
                  <div slot="cardHeader">既往用药史</div>
                  <div slot="cardBody"><el-input v-model="test" type="textarea" /></div>
                </card></div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="伴发疾病与用药情况" name="second">
              <div class="cards">
                <div class="card-item card-item-max"><card>
                  <div slot="cardHeader">伴发疾病与用药情况</div>
                  <div slot="cardBody" class="cardBody">
                    <el-input v-model="test" type="textarea" /></div>
                </card></div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="药物不良反应及处置史" name="third">
              <div class="cards">
                <div class="card-item card-item-max"><card>
                  <div slot="cardHeader">药物不良反应及处置史</div>
                  <div slot="cardBody" class="cardBody">
                    <el-input v-model="test" type="textarea" /></div>
                </card></div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="诊断" name="fourth">
              <div class="cards cardtwo">
                <div class="card-item card-flex">
                  <card>
                    <div slot="cardHeader">入院诊断</div>
                    <div slot="cardBody" class="cardBody">
                      <el-input v-model="test" type="textarea" />
                    </div>
                  </card>
                </div>
                <div class="card-item card-flex"><card>
                  <div slot="cardHeader">出院诊断</div>
                  <div slot="cardBody" class="cardBody">
                    <el-input v-model="test" type="textarea" /></div>
                </card></div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="药物治疗总结" name="fifth">
              <div class="cards">
                <div class="card-item card-item-max"><card>
                  <div slot="cardHeader">药物治疗分析及总结</div>
                  <div slot="cardBody" class="cardBody">
                    <el-input v-model="test" type="textarea" /></div>
                </card></div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>

    <el-dialog width="90%" title="姓名" :visible.sync="childOpenInfo">
      <div class="wrapper">
        <div class="content-top">
          <card>
            <div slot="cardHeader" style="text-align: left">病人基本信息</div>
            <div slot="cardBody" class="card_body_info">

              <div class="info_wrapper">
                <div class="info_item">
                  <div class="info_tip">住院号:</div>
                  <div class="info_tip_value">144036</div>
                </div>
                <div class="info_item">
                  <div class="info_tip">住院次数:</div>
                  <div class="info_tip_value">4</div>
                </div>
                <div class="info_item">
                  <div class="info_tip">当前科室:</div>
                  <div class="info_tip_value">妇科门诊</div>
                </div>

                <div class="info_item">
                  <div class="info_tip">入院日期:</div>
                  <div class="info_tip_value">2018-02-06</div>
                </div>
                <div class="info_item">
                  <div class="info_tip">主管医生:</div>
                  <div class="info_tip_value">魏方方</div>
                </div>
                <div class="info_item">
                  <div class="info_tip">费别:</div>
                  <div class="info_tip_value">2</div>
                </div>
                <div class="info_item">
                  <div class="info_tip">病人姓名:</div>
                  <div class="info_tip_value">卞霜</div>
                </div>
                <div class="info_item">
                  <div class="info_tip">性别:</div>
                  <div class="info_tip_value">女</div>
                </div>
                <div class="info_item">
                  <div class="info_tip">出生日期:</div>
                  <div class="info_tip_value">1992/4/8 0:00:00</div>
                </div>
                <div class="info_item">
                  <div class="info_tip">年龄:</div>
                  <div class="info_tip_value">25</div>
                </div>
                <div class="info_item">
                  <div class="info_tip">身高(cm):</div>
                  <span class="c_tip_content" />
                </div>
                <div class="info_item">
                  <div class="info_tip">体重(kg):</div>
                  <span class="c_tip_content" />
                </div>
                <div class="info_item">
                  <div class="info_tip">联系电话:</div>
                  <div class="info_tip_value">13013662318</div>
                </div>
                <div class="info_item">
                  <div class="info_tip">身份证号:</div>
                  <div class="info_tip_value">32072111111111111X</div>
                </div>
                <div class="info_item">
                  <div class="info_tip">EMR</div>
                  <div class="info_tip_value" />
                </div>
                <div class="info_item">
                  <div class="info_tip">过敏药物:</div>
                  <span class="c_tip_content" />
                </div>
                <div class="info_item info_long">
                  <div class="info_tip">临床诊断:</div>
                  <div class="info_tip_value">早期人工流产(计划生育)</div>
                </div>
              </div>
            </div>
          </card>
        </div>
        <div class="content-bottom">
          <el-tabs v-model="activeNameInfo">
            <el-tab-pane label="医嘱信息" name="first">
              <div class="query">
                <div class="check">
                  <div class="c_right">
                    <div class="clear">
                      <div class="fl">
                        <span class="c_tip">药品筛选</span>
                        <input type="text" class="c_input">
                      </div>
                      <div class="fl">
                        <span class="c_tip" />
                        <el-select v-model="value" placeholder="请选择" class="c_select">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </div>
                      <div class="fl">
                        <span class="c_tip" />
                        <el-select v-model="value" placeholder="请选择" class="c_select">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </div>
                      <div class="fl">
                        <span class="c_tip" />
                        <el-select v-model="value" placeholder="请选择" class="c_select">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <da-table />
            </el-tab-pane>
            <el-tab-pane label="检查信息" name="second">
              <div class="cards cardtwo">
                <div class="card-item card-flex">
                  <card>
                    <div slot="cardHeader">检查项目清单</div>
                    <div slot="cardBody" class="cardBody">
                      <checklist-table />
                    </div></card>
                </div>
                <div class="card-item card-flex"><card>
                  <div slot="cardHeader">检查项目明细</div>
                  <div slot="cardBody" class="cardBody">
                    <checkdetails-table />
                  </div>
                </card></div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="检验信息" name="third">
              <div class="cards cardtwo">
                <div class="card-item card-flex">
                  <card>
                    <div slot="cardHeader">检验项目清单</div>
                    <div slot="cardBody" class="cardBody">
                      <inspectionlist-table />
                    </div></card>
                </div>
                <div class="card-item card-flex"><card>
                  <div slot="cardHeader">检验项目明细</div>
                  <div slot="cardBody" class="cardBody">
                    <inspectiondetails-table />
                  </div>
                </card></div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="费用信息" name="fourth">
              <cost-table />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Card from '../../childComps/card/Card'
import DaTable from './DaTable'
import ChecklistTable from './ChecklistTable'
import CheckdetailsTable from './CheckdetailsTable'
import InspectionlistTable from './InspectionlistTable'
import InspectiondetailsTable from './InspectiondetailsTable'
import CostTable from './CostTable'
export default {
  components: {
    Card,
    DaTable,
    ChecklistTable,
    CheckdetailsTable,
    InspectionlistTable,
    InspectiondetailsTable,
    CostTable
  },
  data() {
    return {
      activeName: 'first',
      activeNameInfo: 'first',
      childOpen: false,
      childOpenInfo: false,
      value: '',
      query: {
        total: 100,
        page: 1,
        limit: 10
      },
      test: '',
      tHead: [
        {
          operate: ['弹框'],
          label: '测试用'
        },
        {
          prop: 'status',
          label: '状态'
        },
        {
          prop: 'date',
          label: '住院号'
        },
        {
          prop: 'date',
          label: '病人姓名'
        },
        {
          prop: 'date',
          label: '当前科室'
        },
        {
          prop: 'date',
          label: '主管医生'
        },
        {
          prop: 'date',
          label: '入院日期'
        },
        {
          prop: 'date',
          label: '出院日期'
        },
        {
          prop: 'date',
          label: '入院诊断'
        },
        {
          prop: 'date',
          label: '出院诊断'
        },
        {
          prop: 'date',
          label: '药品(种)'
        },
        {
          prop: 'date',
          label: '抗菌药(0/1)'
        },
        {
          prop: 'date',
          label: '特殊抗菌药(0/1)'
        },
        {
          prop: 'date',
          label: '基本药物(种)'
        }
      ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '111',
        status: ''
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '111',
        status: ''
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '111',
        status: ''
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '111',
        status: ''
      }],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }]

    }
  },
  methods: {
    getList() {
      console.log(1)
    },
    setTrue(res) {
      var selectBtn = this.$refs.blueTable.selectBtn
      if (selectBtn === '弹框') {
        this.childOpen = res
      }
    }

  }
}
</script>

<style lang="scss" scoped>
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      display:flex;
      line-height:60px;
      background:#fff;
      text-align:center;
      .c_right{
        overflow:hidden;
        color:#636365;
        .c_tip{
          display:inline-block;
          width:100px;
          padding-right:10px;
          text-align:right;
        }
        .c_tip_long{
          width: 220px;
        }
        .c_input{
          width:150px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }
        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:100px;
        }
        .c_searchbtn{
          display:inline-block;
          width:42px;
          height:25px;
          margin-left:4px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:230px;
          height:40px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          width:70px;
          height:40px;
          line-height:40px;
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }
    .table_box{
      padding:0 18px;
    }
  }
  .el-checkbox__label{
    padding-left:5px;
  }
  .el-checkbox{
    margin-right:10px;
  }
  .cards{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .card-item{
      width: 425px;
      padding: 10px;
    }
    .card-item-max{
      width: 100%;
    }
    /deep/.el-textarea__inner{
      height: 300px;
    }
  }
  .cardtwo{
    display: flex;
    justify-content: space-around;
    .card-flex{
      flex: 1;
    }
  }
  .card_body_info{
    display: flex;
    justify-content: center;
  }
  .info_wrapper{
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    .info_item{
      width: 230px;
      display: flex;
      padding-bottom: 5px;
      .info_tip{
        width: 80px;
        text-align: right;
      }
    }
    .info_long{
      width: 280px;
    }
  }

</style>
